<template>
	<view class="details">
		<view class="teacher-info">
			<image class="info-bg" src="/static/user/bg.png" mode="widthFix"></image>
			<uni-nav-bar dark left-icon="left" :fixed="true" title="" :border="false" background-color="transparent" color="#22242A" @clickLeft="utils.goBack()" />
			<view class="name-head">
				<view class="left">
					<view class="avatar-head">
						<image class="head" :src="utils.headImage(adminInfo)" mode="aspectFill" @click="viewImage(utils.headImage(adminInfo))"></image>
					</view>
					<view class="name-student-no">
						<text class="name">{{adminInfo.name}}</text>
					</view>
				</view>
				<view>
					<image v-if="userInfo.accountId!=accountId" class="xiaoxi" @click="chatPage(adminInfo)" src="/static/stu/ssjl.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="user-content">
			<wpp-tab :tabs="tabList" :active-index="activeIndex" @change="changeTab"></wpp-tab>
			<view class="content-list" v-if="activeIndex==1">
				<content-recommend :isMy="false" :on-show="showChange" :account-id="accountId" :active-tab="1" :on-reach-bottom="reachBottom"></content-recommend>
			</view>
			<view v-if="activeIndex==2">
				<active-overview :account-id="accountId" :my-publish="true"></active-overview>
			</view>
			<view v-if="activeIndex==3" class="course-list">
				<view class="cou-item" v-for="recommend in recommendList" :key="recommend.id" @click="goCourseDetails(recommend.id)">
					<view class="cou-image" v-if="!recommend.picture">
						<image src="/static/campus/tj-bg.png" mode="aspectFill"></image>
						<view class="cou-image-title">
							<text>{{recommend.name.length>=8 ? recommend.name.slice(0, parseInt(recommend.name.length/2)) : recommend.name}}</text>
							<text v-if="recommend.name.length>=8">{{recommend.name.slice(parseInt(recommend.name.length/2))}}</text>
						</view>
					</view>
					<image v-else class="cou-image" :src="api.xiaodeObsUrl+recommend.picture" mode="aspectFill"></image>
					<view class="right">
						<view class="cou-title"><text>{{recommend.name}}</text></view>
						<text class="cou-tag" :style="{background: utils.tagBgColor(label), display: label?'inline':'none'}" v-for="(label, Linx) in labelHandle(recommend.labels)" :key="Linx">{{label}}</text>
						<view class="cou-name-num">
							<text class="teacher-name">{{recommend.lecturer}}</text>
							<text v-if="recommend.view_num>0">{{recommend.view_num}}次观看</text>
						</view>
					</view>
				</view>
				<uni-load-more :status="loadMore" color="#BFBFBF"></uni-load-more>
			</view>
			<view class="content-list" v-if="activeIndex==4">
				<content-recommend :on-show="showChange" :account-id="accountId" :active-tab="2" :on-reach-bottom="reachBottom"></content-recommend>
			</view>
		</view>
		
	</view>
</template>
<script>
	import wppTab from '@/components/wpp-tab.vue'
	import activeOverview from '../student/components/active-overview.vue'
	import contentRecommend from '../recommend/content-recommend.vue'
	export default {
		components: {
			wppTab,
			activeOverview,
			contentRecommend
		},
		data(){
			return {
				userInfo: {}, // 用户信息
				tabList: [{value: 1, table: '我的推荐'}, {value: 2, table: '特色活动'}, {value: 3, table: '好课分享'}, {value: 4, table: '新鲜事'}],
				activeIndex: 1, // 对应tabList value
				adminInfo: {}, // 详情信息
				accountId: '', // 用户的账号id
				userType: '', // 用户类型
				reachBottom: 1, // 触发底部时触发参数
				recommendList: [], // 推荐课程列表
				showChange: 0, // 执行onShow时，数值改变
				currentPage: 1, // 当前页
				loadMore: 'more',
			}
		},
		onShow(){
			this.showChange ++
		},
		onLoad(options) {
			this.accountId = options.id;
			this.getUserDetails()
		},
		onReachBottom(){
			this.reachBottom ++
			if(this.activeIndex == 3 && this.loadMore == 'more') {
				this.currentPage ++
				this.getTeacherPublicCurriculum()
			}
		},
		methods: {
			// 切换选项
			changeTab(val){
				this.activeIndex = val;
				// 1.我的推荐 2.特色活动 3.好课分享 4.新鲜事 
				if(val == 3){
					this.recommendList = []
					this.getTeacherPublicCurriculum()
				}
			},
			// 获取用户详情
			getUserDetails(){
				this.api.get('user/findUserDetails', {
					accountId: this.accountId
				}).then(res=>{
					if(res.data.state != 'ok') return;
					this.userInfo = getApp().globalData.userInfo;
					let data = res.data;
					this.adminInfo = data.admin;
					this.userType = this.adminInfo.user_type
					this.adminInfo.userType = this.userType
					
				})
			},
			// 获取推荐的课程
			getTeacherPublicCurriculum(){
				this.loadMore = 'loading'
				this.api.get('happy/getTeacherPublicCurriculum', {
					publisherId: this.adminInfo.id,
					page: this.currentPage,
					limit: 10
				}).then(res=>{
					this.loadMore = 'more'
					if(res.data.state == 'ok') {
						let cmPage = res.data.cmPage
						this.recommendList = this.recommendList.concat(cmPage.list)
						if(cmPage.totalPage <= this.currentPage){
							this.loadMore = 'no-more'
						}
					}
				})
			},
			// 课程标签处理
			labelHandle(str){
				if(str.indexOf(';')!=-1){
					return str.split(';')
				}
				if(str.indexOf('；')!=-1){
					return str.split('；')
				}
				
				return [str]
			},
			// 聊天页面
			chatPage(item){
				let url = item.avatarUrl||'';
				uni.navigateTo({
					url: `/pages/chatSystem/chat-page?toUserType=${item.userType}&id=${item.id}&accountId=${item.accountId}&name=${item.name}&avatarUrl=${url}`// 使用用户id
				})
			},
			// 预览头像
			viewImage(url){
				uni.previewImage({
					urls: [url],
					current: 1
				});
			},
			// 课程详情
			goCourseDetails(id){
				uni.navigateTo({
					url: `/pages/recommend/course-details?id=${id}`
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	// 27px 是手机上面显示时间的 盒子的高度
	.teacher-info{
		position: relative;
		// #ifdef APP-PLUS
		padding-top: 27px;
		height: 386rpx;
		// #endif
		// #ifdef H5
		height: calc(386rpx - 27px);
		// #endif
		box-sizing: border-box;
		.info-bg{
			position: absolute;
			top: 0;
			bottom: 0;
			width: 100%;
		}
	}
	
	.name-head{
		position: relative;
		// #ifdef H5
		margin-top: calc(160rpx - 27px - 44px);
		// #endif
		// #ifdef APP-PLUS
		margin-top: calc(160rpx - 44px);
		// #endif
		padding: 0 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.left{
			display: flex;
			
		}
		.head{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			border: 6rpx solid rgba(255, 255, 255, .5);
		}
		.xiaoxi{
			width: 86rpx;
			height: 86rpx;
		}
		.name-student-no{
			margin-top: 7rpx;
			margin-left: 26rpx;
		}
		.name{
			color: #333;
			font-size: 34rpx;
			line-height: 48rpx;
			font-weight: bold;
		}
		.student-no{
			margin-top: 10rpx;
			display: block;
			font-size: 20rpx;
			line-height: 28rpx;
			color: #666666;
		}
	}
	.user-content{
		position: relative;
		// #ifdef H5
		margin-top: -66rpx;
		// #endif
		
		// #ifdef APP-PLUS
		margin-top: calc(-66rpx + 27px);
		// #endif
		background-color: #fff;
		border-radius: 32rpx 32rpx 0 0;
		min-height: 500rpx;
	}

	.content-list{
		padding-top: 20rpx;
		overflow: hidden;
	}
	.course-list{
		padding: 24rpx 32rpx 0;
		overflow: hidden;
		.no-course{
			text-align: center;
			color: #bfbfbf;
		}
	}
	.cou-item{
		display: flex;
		border-bottom: 1rpx solid #EEEEEE;
		margin-bottom: 24rpx;
		padding-bottom: 24rpx;
		image{
			
			width: 216rpx;
			height: 136rpx;
		}
		.right{
			width: calc(100% - 240rpx);
		}
	}
	.cou-image{
		position: relative;
		margin-right: 24rpx;
		border-radius: 20rpx;
		overflow: hidden;
		image{
			border-radius: 20rpx;
		}
	}
	.cou-image-title{
		position: absolute;
		top: 44rpx;
		width: 100%;
		line-height: 26rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 24rpx;
		font-weight: bold;
	}
	.cou-title{
		font-size: 30rpx;
		color: #333;
		margin-bottom: 10rpx;
	}
	.cou-tag{
		font-size: 22rpx;
		border-radius: 8rpx;
		padding: 4rpx 8rpx;
		color: #fff;
		margin-right: 24rpx;
	}
	.cou-name-num{
		margin-top: 17rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #999999;
		text{
			white-space: nowrap;
		}
		.teacher-name{
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
</style>